<div class="pure-g-r wrap">
    <div class="pure-u-2-3">
        <div class="panel" id="{{article._id}}">
            <div class="article-header">
                <h3>{{article.title}} <small><a ng-show="global.isEditor" ng-click="highlight(article)" ng-class="{info:article.status<2,warning:article.status==2}"><i class="fa fa-hand-o-up"></i>{{article.status==2 | switch:'highlight'}}</a></small></h3>
                <div class="article-info">
                    <a ng-href="{{article.refer.url}}" title="原文"><i class="fa fa-external-link--square success"></i>{{article.refer.url | cutText:25}}</a>
                    <i class="fa fa-clock-o" data-original-title="{{article.date | formatDate:true}}发布" gen-tooltip> {{article.date | formatDate}}</i>
                    <i class="fa fa-refresh" data-original-title="{{article.updateTime | formatDate:true}}更新" gen-tooltip> {{article.updateTime | formatDate}}</i>
                    <i class="fa fa-eye" data-original-title="访问{{article.visitors}}次" gen-tooltip> {{article.visitors}}</i>
                    <i class="fa fa-star-o" data-original-title="热度{{article.hots}}" gen-tooltip> <span>{{article.hots}}</span></i>
                    <i class="fa fa-comments-o" data-original-title="评论{{article.comments}}条" ng-show="article.comments" gen-tooltip> {{article.comments}}</i>
                    <a ng-repeat="tag in article.tagsList" ng-href="{{'/'+tag._id}}" class="pure-button pure-button-link">{{tag.tag}}</a>
                    <a class="success" ng-show="article.isAuthor||global.isEditor" ng-href="{{'/'+article._id+'/edit'}}"><i class="fa fa-pencil"></i> 编辑</a>
                </div>
            </div>
            <div class="article-content" gen-parse-md="article.content">
            </div>
            <div class="pure-g-r article-footer">
                <div class="pure-u-1-2 pure-hidden-phone">
                    <div class="article-info" ng-show="article.favorsList">
                        <i class="fa fa-thumbs-up"> 支持</i>
                        <span ng-repeat="user in article.favorsList">
                            <a ng-href="{{'/'+user._id}}">{{user.name}}</a>
                        </span>
                    </div>
                    <div class="article-info" ng-show="article.opposesList">
                        <i class="fa fa-thumbs-down"> 反对</i>
                        <span ng-repeat="user in article.opposesList">
                            <a ng-href="{{'/'+user._id}}">{{user.name}}</a>
                        </span>
                    </div>
                    <div class="article-info" ng-show="article.markList">
                        <i class="fa fa-bookmark"> 收藏</i>
                        <span ng-repeat="user in article.markList">
                            <a ng-href="{{'/'+user._id}}">{{user.name}}</a>
                        </span>
                    </div>
                </div>
                <div class="pure-u-1-2 text-right">
                    <div class="pure-button-group">
                        <button class="pure-button pure-button-small info-bg" title="支持" ng-click="setFavor(article)">
                            <i ng-class="{'fa fa-thumbs-up':article.isFavor,'fa fa-thumbs-o-up':!article.isFavor}"></i> {{article.favorsList.length}}
                        </button>
                        <button class="pure-button pure-button-small info-bg" title="收藏" ng-click="setMark(article)">
                            <i ng-class="{'fa fa-bookmark':article.isMark,'fa fa-bookmark-o':!article.isMark}"></i> {{article.markList.length}}
                        </button>
                        <button class="pure-button pure-button-small info-bg" title="反对" ng-click="setOppose(article)">
                            <i ng-class="{'fa fa-thumbs-down':article.isOppose,'fa fa-thumbs-o-down':!article.isOppose}"></i> {{article.opposesList.length}}
                        </button>
                    </div>
                    <div class="pure-button-group">
                        <button ng-click="reply(article)" class="pure-button pure-button-small success-bg">发表评论<i class="fa fa-reply"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel" id="comments">
            <div class="inner" id="replyForm" gen-moving="replyMoving">
                <h4>{{comment.title}}</h4>
                <div class="wmd-preview article-content" ng-show="parent.wmdPreview" gen-parse-md="comment.content">
                </div>
                <form class="pure-form" ng-hide="parent.wmdPreview">
                    <div id="wmd-button-bar"></div>
                    <textarea class="wmd-input pure-input-1" id="wmd-input" name="评论内容" placeholder="{{global.isLogin?'请使用MarkDown语法编辑内容':'您还没有登录，不能发表评论哦'}}" ng-model="comment.content" rows="6" ui-validate="{maxlength:checkContentMax,minlength:checkContentMin}" gen-tooltip="validateTooltip" required>
                    </textarea>
                </form>
                <div class="article-info">
                    [使用<a ng-click="wmdHelp()">MarkDown语法</a>，{{global.ContentMinLen}} 到 {{global.ContentMaxLen}} 字节，当前<strong class="hot">{{parent.contentBytes}}</strong>字节]
                </div>
                <div class="text-right">
                    <div class="pure-button-group">
                        <button class="pure-button pure-button-small info-bg" ng-click="wmdPreview()">编辑 / 预览</button>
                    </div>
                    <div class="pure-button-group">
                        <button class="pure-button pure-button-small info-bg" ng-if="comment.replyToComment" ng-click="reply(article)">返回</button>
                        <button class="pure-button pure-button-small success-bg" ng-click="submit()">提交</button>
                    </div>
                </div>
            </div>
            <ul class="media-list comments">
                <li class="media" ng-repeat="comment in article.commentsList">
                  <a class="media-object left" ng-href="{{'/'+comment.author._id}}" ng-show="!global.isPocket">
                    <img class="img-small" src="http://cdn.angularjs.cn/img/avatar.png" gen-src="{{comment.author.avatar}}">
                  </a>
                  <div class="media-body" id="{{comment._id}}">
                    <div class="media-heading">
                        <a ng-click="getComments(comment.refer._id, comment)">{{comment.title}}</a>
                        <a class="right" title="删除评论" ng-show="comment.isAuthor||global.isEditor" ng-click="remove(comment)">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                    <div class="media-content list-content" gen-parse-md="comment.content"></div>
                    <div class="pure-g-r media-footer">
                        <div class="pure-u-1-2"><a ng-href="{{'/'+comment.author._id}}">{{comment.author.name}}</a> <span data-original-title="{{comment.date | formatDate:true}}发布" gen-tooltip>{{comment.date | formatDate}}发表</span></div>
                        <div class="pure-u-1-2 text-right">
                            <div class="pure-button-group">
                                <button class="pure-button pure-button-link" title="支持" ng-click="setFavor(comment)">
                                    <i ng-class="{'fa fa-thumbs-up':comment.isFavor,'fa fa-thumbs-o-up':!comment.isFavor}"> {{comment.favorsList.length}}</i>
                                </button>
                                <button class="pure-button pure-button-link" title="评论" ng-click="getComments(comment.commentsList, comment)">
                                    <i class="fa fa-comments-o"></i> {{comment.commentsList.length}}
                                </button>
                                <button class="pure-button pure-button-link" title="反对" ng-click="setOppose(comment)">
                                    <i ng-class="{'fa fa-thumbs-down':comment.isOppose,'fa fa-thumbs-o-down':!comment.isOppose}"></i> {{comment.opposesList.length}}
                                </button>
                            </div>
                            <div class="pure-button-group">
                                <button class="pure-button pure-button-link" ng-click="reply(comment)" class="pure-button pure-button-primary">回复<i class="fa fa-reply"></i></button>
                            </div>
                        </div>
                    </div>
                  </div>
                </li>
            </ul>
            <ul class="media-list comments"  id="commentForm" gen-moving="commentMoving">
                <li class="media" ng-repeat="comment in referComments">
                  <a class="media-object left" ng-href="{{'/'+comment.author._id}}" ng-show="!global.isPocket">
                      <img class="img-small" src="http://cdn.angularjs.cn/img/avatar.png" gen-src="{{comment.author.avatar}}">
                  </a>
                  <div class="media-body">
                    <div class="media-heading">
                        {{comment.title}}
                    </div>
                    <div class="media-content list-content" gen-parse-md="comment.content"></div>
                    <div class="pure-g-r media-footer">
                        <div class="pure-u-1-2"><a ng-href="{{'/'+comment.author._id}}">{{comment.author.name}}</a> <span data-original-title="{{comment.date | formatDate:true}}发布" gen-tooltip>{{comment.date | formatDate}}发表</span></div>
                        <div class="pure-u-1-2 text-right">
                            <div class="pure-button-group">
                                <button class="pure-button pure-button-link" title="支持" ng-click="setFavor(comment)">
                                    <i ng-class="{'fa fa-thumbs-up':comment.isFavor,'fa fa-thumbs-o-up':!comment.isFavor}"> {{comment.favorsList.length}}</i>
                                </button>
                                <button class="pure-button pure-button-link" title="反对" ng-click="setOppose(comment)">
                                    <i ng-class="{'fa fa-thumbs-down':comment.isOppose,'fa fa-thumbs-o-down':!comment.isOppose}"></i> {{comment.opposesList.length}}
                                </button>
                            </div>
                        </div>
                    </div>
                  </div>
                </li>
            </ul>
        </div>
        <div gen-pagination="pagination"></div>
    </div>
    <div class="pure-u-1-3 aside">
        <div class="panel">
            <div class="panel-heading">作者信息</div>
            <div class="media inner">
                <a class="media-object left" ng-href="{{'/'+article.author._id}}">
                    <img class="img-small" src="http://cdn.angularjs.cn/img/avatar.png" gen-src="{{article.author.avatar}}">
                </a>
                <div class="media-body">
                    <div class="media-header"><a ng-href="{{'/'+article.author._id}}">{{article.author.name}}</a></div>
                    <button class="pure-button success-bg" ng-show="!article.author.isMe" ng-click="followMe(article.author)">{{article.author.isFollow | switch:'follow'}}</button>
                </div>
            </div>
            <ul class="inner list-inline article-info">
                <li>
                    <strong class="info">{{article.author.role | match:'role'}}</strong>
                </li>
                <li ng-show="article.author.score">
                    积分：<strong>{{article.author.score}}</strong>
                </li>
                <li ng-show="article.author.fans">
                    粉丝：<strong>{{article.author.fans}}</strong>
                </li>
                <li ng-show="article.author.follow">
                    关注：<strong>{{article.author.follow}}</strong>
                </li>
                <li ng-show="article.author.articles">
                    文章/评论：<strong>{{article.author.articles}}</strong>
                </li>
                <li ng-show="article.author.collections">
                    合集：<strong>{{article.author.collections}}</strong>
                </li>
            </ul>
        </div>
        <div class="panel" ng-show="article.author.articlesList.length>0">
            <div class="panel-heading">作者文章</div>
            <ul class="media-list comments">
                <li ng-repeat="item in article.author.articlesList">
                    <span class="label">{{item.date | formatDate}}</span>&nbsp;<a ng-href="{{'/'+item._id}}" title="{{item.author.name+'发表'}}">{{item.title}}</a>
                </li>
            </ul>
        </div>
        <div class="panel pure-hidden-phone" ng-show="hotArticles.length>0">
            <div class="panel-heading">热门文章</div>
            <ul class="media-list comments">
                <li class="media" ng-repeat="item in hotArticles">
                  <div class="media-body" id="{{item._id}}">
                    <small class="hot" title="热度">{{item.hots}}</small>&nbsp;
                    <span class="media-content"><a ng-href="{{'/'+item._id}}" title="{{item.author.name+'发表'}}">{{item.title}}</a></span>
                  </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<div gen-modal="markdownModal">
    <div gen-parse-md="parent.markdownHelp"></div>
</div>
<div gen-modal="removeCommentModal">确定要删除评论《{{removeComment.title}}》？</div>